<template>
  <div class="learning-path">
    <el-steps :active="currentStep" finish-status="success">
      <el-step v-for="step in learningPath.steps" :key="step.title" :title="step.title" />
    </el-steps>
    
    <div class="path-content">
      <div class="markdown-body" v-html="formatContent(learningPath.content)" />
    </div>
    
    <div class="practice-section">
      <h3>练习题</h3>
      <QuestionList :questions="learningPath.questions" />
    </div>
    
    <div class="progress-section">
      <el-progress :percentage="progress" :format="progressFormat" />
      <div class="stats">
        <div class="stat-item">
          <div class="stat-value">{{ completedQuestions }}</div>
          <div class="stat-label">已完成</div>
        </div>
        <div class="stat-item">
          <div class="stat-value">{{ remainingTime }}</div>
          <div class="stat-label">预计剩余时间</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { marked } from 'marked'
import QuestionList from './QuestionList.vue'
import { ElMessage } from 'element-plus'
import axios from 'axios'

const props = defineProps({
  pathId: {
    type: Number,
    required: true
  }
})

const learningPath = ref({
  steps: [],
  content: '',
  questions: []
})

const currentStep = ref(0)
const progress = ref(0)

const completedQuestions = computed(() => {
  return learningPath.value.questions.filter(q => q.isLearned).length
})

const remainingTime = computed(() => {
  const remaining = learningPath.value.questions.length - completedQuestions.value
  const avgTimePerQuestion = 30 // 假设每道题平均需要30分钟
  const totalMinutes = remaining * avgTimePerQuestion
  
  if (totalMinutes < 60) {
    return `${totalMinutes}分钟`
  }
  return `${Math.round(totalMinutes / 60)}小时`
})

const progressFormat = (percentage) => {
  return `${percentage}% 完成`
}

const formatContent = (content) => {
  return marked(content)
}

const fetchLearningPath = async () => {
  try {
    const response = await axios.get(`/api/learning/paths/${props.pathId}`)
    learningPath.value = response.data
    calculateProgress()
  } catch (error) {
    ElMessage.error('获取学习路径失败')
  }
}

const calculateProgress = () => {
  if (!learningPath.value.questions.length) return
  progress.value = Math.round(
    (completedQuestions.value / learningPath.value.questions.length) * 100
  )
}

onMounted(fetchLearningPath)
</script>

<style scoped>
.learning-path {
  padding: 20px;
}

.path-content {
  margin: 20px 0;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.05);
}

.practice-section {
  margin-top: 30px;
}

.progress-section {
  margin-top: 30px;
  text-align: center;
}

.stats {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-top: 20px;
}

.stat-item {
  text-align: center;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #409EFF;
}

.stat-label {
  font-size: 14px;
  color: #909399;
  margin-top: 4px;
}
</style> 